<template>
    <div class="gsap">
        <div class="box" ref="box"></div>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { gsap } from "gsap";
const box = ref(null);

onMounted(() => {
    gsap.to(box.value, { x: 1200, duration: 2, scale: 2, yoyo: true, repeat: 2, })
});
</script>
<style scoped lang="scss">
.gsap {
    width: 100vw;
    height: 100vh;
    background-color: #121212;
    display: flex;
    align-items: center;

    .box {
        width: 100px;
        height: 100px;
        background-image: url('https://img.keaitupian.cn/newupload/06/1686641149755068.jpg');
        background-size: 100% 100%;
    }
}
</style>